<template>
    <div class="shop-info">
        <div class="info-content">
            <section class="section">
                <h3 class="section-title">配送信息</h3>
                <div class="delivery">
                    <div>
                        <span class="delivery-icon">{{shopSeller.description}}</span>
                        <span>由商家配送提供配送，约 {{shopSeller.deliveryTime}} 分钟送达，距离 {{shopSeller.distance}}</span>
                    </div>
                    <div class="delivery-money">配送费￥{{shopSeller.deliveryPrice}}</div>
                </div>
            </section>
            <div class="split"></div>
            <section class="section">
                <h3 class="section-title">活动与服务</h3>
                <div class="activity">
                    <!--activity-red  activity-orange-->
                    <div class="activity-item activity-green" v-for="(suport,index) in shopSeller.suports" :key="index">
                        <span class="content-tag">
                            <span class="mini-tag">{{suport.name}}</span>
                        </span>
                        <span class="activity-content">{{suport.content}}</span>
                    </div>
                </div>
            </section>
            <div class="split"></div>
            <section class="section">
                <h3 class="section-title">商家实景</h3>
                <div class="pic-wrapper">
                    <ul class="pic-list" ref="piclist">
                        <li class="pic-item" v-for="(pic,index) in shopSeller.pics" :key="index">
                            <img width="120" height="90" :src="pic"/>
                        </li>
                    </ul>
                </div>
            </section>
            <div class="split"></div>
            <section class="section">
                <h3 class="section-title">商家信息</h3>
                <ul class="detail">
                    <li><span class="bold">品类</span> <span>包子粥店</span></li>
                    <li><span class="bold">商家电话</span> <span>13301083744</span></li>
                    <li><span class="bold">地址</span> <span>北京市丰台区</span></li>
                    <li><span class="bold">营业时间</span> <span>08:35-23:00</span></li>
                </ul>
            </section>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'Vuex'
    import BScroll from 'better-scroll'
    import $ from 'jquery'
    export default {
        name: "ShopInfo",
        computed:{
            ...mapState(['shopSeller'])
        },
        mounted (){
            //如果在这个页面刷新 要确保shopSeller对象不为空
            if(!this.shopSeller.pics){
                return ;
            }

            this._initScroll()
        },
        watch :{
            shopSeller (){
                this._initScroll()
            }
        },
        methods:{
            _initScroll(){
                new BScroll('.shop-info',{
                    click:true
                })

                // 计算ul的宽度
                let list=this.$refs.piclist;
                let {pics}=this.shopSeller
                let listwidth=126*pics.length-6;
                $(list).css('width',listwidth+'px')

                new BScroll('.pic-wrapper',{
                    scrollX: true,
                    click:true
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../../common/stylus/mixins.styl"
    .shop-info
        position: absolute
        top: 195px
        bottom: 0
        left: 0
        width: 100%
        background: #fff;
        overflow: hidden
        .section
            padding 16px 14px 14px
            font-size 16px
            background-color #fff
            color #666
            border-bottom 1px solid #eee
            position relative
            .section-title
                color #000
                font-weight 700
                line-height 16px
                > .iconfont
                    float right
                    color #ccc
            .delivery
                margin-top 16px
                font-size 13px
                line-height 18px
                .delivery-icon
                    width 55px
                    font-size 11px
                    margin-right 10px
                    display inline-block
                    text-align center
                    color #fff
                    background-color #0097ff
                    padding 1px 0
                    border-radius 4px
                .delivery-money
                    margin-top 5px
    .activity
        margin-top 16px
        .activity-item
            margin-bottom 12px
            display flex
            font-size 13px
            align-items center
            &.activity-green
                .content-tag
                    background-color rgb(112, 188, 70)
            &.activity-red
                .content-tag
                    background-color rgb(240, 115, 115)
            &.activity-orange
                .content-tag
                    background-color: rgb(241, 136, 79)
        .content-tag
            display inline-block
            border-radius 2px
            width 36px
            height: 18px
            margin-right 10px
            color #fff
            font-style normal
            position relative
            .mini-tag
                position absolute
                left 0
                top 0
                right -100%
                bottom -100%
                font-size 24px
                transform scale(.5)
                transform-origin 0 0
                display flex
                align-items center
                justify-content center
    .pic-wrapper
        width: 100%
        overflow: hidden
        white-space: nowrap
        margin-top 16px
        .pic-list
            /*width:600px*/
            font-size: 0
            display: flex
            justify-content start
            flex-wrap: nowrap
            .pic-item
                display: inline-block
                margin-right: 6px
                width: 120px
                height: 90px
                &:last-child
                    margin: 0
    .detail
        margin-bottom -16px
        > li
            display flex
            justify-content space-between
            align-items center
            margin-right -10px
            padding 16px 12px 16px 0
            line-height 16px
            bottom-border-1px(#ddd)
            font-size 13px
            > .bold
                font-weight 700
                color #333
                &:last-child
                    border-none()
    .split
        width: 100%
        height: 16px
        border-top: 1px solid rgba(7, 17, 27, 0.1)
        border-bottom: 1px solid rgba(7, 17, 27, 0.1)
        background: #f3f5f7
</style>
